<template>
  <div class="live-data" :style="{top:top,left:left}">
    <treeselect
      v-model="deptId"
      :options="tree"
      :default-expand-level="4"
      :max-height="400"
      :min-height="400"
      :normalizer="normalizer"
      @select="onSelect"
      placeholder="请选择行政区域"
    />
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { GetTreeSelect, GetPlaces } from "@/api/portalApi";
import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect";
export default {
  name: "SiteFilter",
  data() {
    return {
      isLoading: false,
      checkArr: [],
      tree: [],
      // 表单参数
      deptId: undefined
    };
  },
  props: {
    modelW: {
      type: String,
      default: "60rem"
    },
    modelH: {
      type: String,
      default: "4.4rem"
    },
    top: {
      type: String,
      default: "50%"
    },
    left: {
      type: String,
      default: "50%"
    },
    title: {
      type: String,
      default: "最新预警信息"
    }
  },
  mounted() {
    this.getTreeList();
  },
  components: { Treeselect },
  methods: {
    onSelect(node, instanceId) {
      this.$emit("onSiteSelect", node);
    },
    normalizer(node) {
      console.log(node)
      return {
        id: node.id ? node.id : node.leader,
        label: node.label,
        children: node.children
      };
    },
    async getTreeList() {
      try {
        let tree = await GetTreeSelect();
        this.tree = tree.data;
      } catch (error) {
        console.log(error);
      }
    }
    // justifyTree(data){
    //     data.forEach(el=>{
    //       let newChildren=[]
    //       if(el.id ){
    //         if(el.isComunnity){
    //           return
    //         }else{
    //           this.justifyTree(el.children)
    //           return
    //         }
    //       }else {
    //           var newChild={}
    //           newChild.id=el.leader
    //           newChild.leader=el.leader
    //           newChild.isComunnity=true
    //           newChildren.push(newChild)
    //       }
    //     })
    // }
    // async getTreeList() {
    //   try {
    //     // var tree = await gettree("/api/system/dept/treeselect");
    //     // this.tree = tree;
    //     this.tree = [
    //       {
    //         id: 100,
    //         label: "无锡市",
    //         leader: "3202",
    //         children: [
    //           {
    //             id: 101,
    //             label: "新吴区",
    //             leader: "320214",
    //             children: [
    //               {
    //                 id: 105,
    //                 label: "江溪街道",
    //                 leader: "320214052",
    //                 children: [
    //                   { id: 111, label: "新丰苑社区", leader: "320214052001" }
    //                 ]
    //               }
    //             ]
    //           },
    //           {
    //             id: 102,
    //             label: "梁溪区",
    //             leader: "320214",
    //             children: [
    //               {
    //                 id: 106,
    //                 label: "崇安街道",
    //                 leader: "320214052",
    //                 children: [
    //                   { id: 112, label: "新社区", leader: "320214052001" }
    //                 ]
    //               }
    //             ]
    //           },
    //           {
    //             id: 103,
    //             label: "滨湖区",
    //             leader: "320214",
    //             children: [
    //               {
    //                 id: 107,
    //                 label: "荣巷街道",
    //                 leader: "320214052",
    //                 children: [
    //                   { id: 113, label: "苑社区", leader: "320214052001" }
    //                 ]
    //               }
    //             ]
    //           }
    //         ]
    //       }
    //     ];
    //   } catch (error) {
    //     console.log(error);
    //   }
    // }
  }
};
</script>
<style lang="less">
.vue-treeselect {
  font-size: 0.7rem !important;
  color: white !important;
}
.vue-treeselect__menu {
  // background: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid #61c8d4 !important;

  .vue-treeselect--open-below & {
    top: 0 !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-top-color: #61c8d4 !important;
  }

  .vue-treeselect--open-above & {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border-bottom-color: #61c8d4 !important;
  }
}
//搜索栏输入框控制
.vue-treeselect__control {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid #61c8d4 !important;
  // border: 1px solid #61C8D4;
  .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused)
    &:hover {
    border-color: #61c8d4 !important;
  }

  .vue-treeselect--focused:not(.vue-treeselect--open) & {
    border-color: rgb(209, 240, 243) !important;
    box-shadow: 0 0 0 3px #61c8d4 !important;
  }

  .vue-treeselect--open & {
    border-color: #61c8d4 !important;
  }
}
.vue-treeselect__placeholder {
  color: white !important;
}
.vue-treeselect__single-value {
  color: white !important;
}
.vue-treeselect__option--selected {
  // note that these should override `.vue-treeselect__option--highlight`
  .vue-treeselect--single & {
    background: transparent !important;
    font-weight: 600 !important;

    &:hover {
      background: transparent !important;
    }
  }
}
.vue-treeselect__input {
  color: white !important;
}

.vue-treeselect:not(.vue-treeselect--disabled)
  &:not(.vue-treeselect__multi-value-item-disabled):hover
  &:not(.vue-treeselect__multi-value-item-new)
  &:not(.vue-treeselect__multi-value-item-new):hover {
  cursor: pointer !important;
  background: transparent !important;
}

.vue-treeselect:not(.vue-treeselect--disabled)
  &:not(.vue-treeselect__multi-value-item-disabled):hover
  &:not(.vue-treeselect__multi-value-item-new)
  &:not(.vue-treeselect__multi-value-item-new):hover {
  cursor: pointer !important;

  background: transparent !important;
}

&.vue-treeselect__multi-value-item-disabled {
  cursor: default !important;
  background: rgba(0, 0, 0, 0.8) !important;
}
//选中高亮
.vue-treeselect__option--highlight {
  background: transparent !important;
}

.vue-treeselect__list-item {
  &:hover {
    background: transparent !important;
  }
}
</style>
<style lang="less" scoped>
.live-data {
  width: 22rem;
  position: absolute;
}
</style>